import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { createPage } from 'nc-lightapp-front';
import "./index.less"

/**
 * @功能: 搜索input的组件
 * @作者：Mr.sha
 * @日期：2022-05-26
 */
export default class InpurtSearch extends Component {

    constructor(props){
        super(props);
        this.state = {
            // 模糊搜索的值
            fuzzySearchValue: null
        }
    }
    //===================================================================================当前页面js函数~~~开始


    /**
     * @功能: 模糊搜索的事件
     * @作者：Mr.sha
     * @日期：2022-06-14
     * @param {*} e
     */
    handleClickSearch() {
        let param = { fuzzySearchValue: this.state.fuzzySearchValue };
        if(this.props && this.props.handleClickSearch){
            this.props.handleClickSearch(param);
        }
    }


    /**
     * @功能: input修改触发的事件
     * @作者：Mr.sha
     * @日期：2022-06-14
     * @param {*} e
     */
    handleInputValueChange(e) {
        let fuzzySearchValue = e.target.value;
        this.setState({ fuzzySearchValue });
    }

    //===================================================================================当前页面js函数~~~结束

    //===================================================================================当前页面界面布局~~~开始
    render() {
        let multiLang = this.props.MutiInit.getIntl(2011); 
        return (
            <div className = 'input-search'>
                <input className = 'input-name' placeholder={multiLang.get("201103INUP-0019")} onChange = {(e) => {
                    this.handleInputValueChange(e);
                }} />
                <div class="box32 flex-col"
                    onClick={() => {
                        this.handleClickSearch();
                    }}
                ></div>
            </div>
        )
    }
    //===================================================================================当前页面界面布局~~~结束

}

InpurtSearch = createPage({
    mutiLangCode: '2011'
})(InpurtSearch);

ReactDOM.render(<InpurtSearch />, document.querySelector('#app'));